<template>
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      text-color="#000000"
      unique-opened
      style="border: 0"
      router
      @select="selectindex"
      active-text-color="#00a1ff">
    <el-menu-item index="/home">
      <i class="el-icon-s-home"></i>
      首页
    </el-menu-item>
    <el-submenu index="2" v-if="userqx===9">
      <template slot="title">
        <i class="el-icon-cpu"></i>
        <span>服务器管理</span>
      </template>
      <el-menu-item index="/server/serverinfo">所有服务器</el-menu-item>
      <el-menu-item index="/server/serveradd">添加服务器</el-menu-item>
      <el-menu-item index="/server/recycle">服务器回收站</el-menu-item>
      <el-menu-item index="/server/lease" v-if="userqx===9">服务器租赁</el-menu-item>
      <el-menu-item index="/server/leaseadd" v-if="userqx===9">添加服务器租赁</el-menu-item>
      <el-menu-item index="/server/leasefinish" v-if="userqx===9">历史租赁</el-menu-item>
    </el-submenu>
    <el-submenu index="3" v-if="userqx===9">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/admin">可视化数据</el-menu-item>
      <el-menu-item index="/user/userinfo">所有用户</el-menu-item>
      <el-menu-item index="/user/userbalance">用户余额</el-menu-item>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-shopping-bag-2"></i>
        <span>业务管理</span>
      </template>
      <el-menu-item index="/user/userorderall" v-if="userqx===9">查看线报群所有订单</el-menu-item>
      <el-menu-item index="/goInformantGroup">开通线报群</el-menu-item>
      <el-menu-item index="/user/userorder">查看订单</el-menu-item>
    </el-submenu>
    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-edit-outline"></i>
        <span>文章管理</span>
      </template>
      <el-menu-item index="/perception">最新文章</el-menu-item>
      <el-menu-item index="/perception/add">发布文章</el-menu-item>
      <el-menu-item index="/perception/lookall">我的文章</el-menu-item>
    </el-submenu>
    <el-submenu index="6" v-if="userqx===9">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>网站管理</span>
      </template>
      <el-menu-item index="/errlog">报错日志管理</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "Nav",
  data(){
    return {

    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath); 打开菜单
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath); 关闭菜单
    },
    selectindex(){
      this.$emit("nav_event",false)
    }
  },
  computed:{
    ...mapState([
        'userqx'
    ])
  }
}
</script>

<style scoped>
a{
  color: #303133;
}
a:hover{
  text-decoration: none;
}
.el-menu-item{
  min-height: auto;
}
</style>
